<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>查看</title>

    <style>
        .fa {
            margin-right: 4px;
        }

        body.is-dialog, #main {
            background: #ecf0f5 !important;
        }

        legend {
            padding-bottom: 5px;
            font-size: 14px;
            padding-right: 15px;
        }

        .span-content {
            margin-left: 8px;
            vertical-align: middle;
        }

        .timeline-header a {
            font-size: 80%;
            margin-left: 4px;
        }
        .main-content .tab-content{
            height: calc(100vh - 66px)!important;
            overflow: auto;
            overflow-x: hidden;
            padding: 10px 15px 0 15px!important;
            scrollbar-width: thin;
        }
        .nav-tabs-custom{
            margin-bottom: 0;
        }
        .content {
            padding-top: 15px;
            padding-left: 15px;
            padding-right: 15px;
            padding-bottom: 0;
        }
        div ::-webkit-scrollbar {
            /*滚动条整体*/
            width: 4px;
            height: 6px;
            border-radius: 5px;
        }
        div ::-webkit-scrollbar-track {
            /*滚动条轨道*/
            background: #e3e3e3;
            border-radius: 2px;
        }
        div ::-webkit-scrollbar-thumb {
            /*滚动条里面的滑块*/
            background: #d1d1d1;
            border-radius: 2px;
        }
        div ::-webkit-scrollbar-thumb:hover {
            /*滚动条鼠标事件，鼠标放上去出现的事件*/
            background: #a8a8a8;
        }
        div ::-webkit-scrollbar-corner {
            /*滚动条边角*/
            background: #a8a8a8;
        }
        .bill-title{
            border-left: 4px solid #22a08b;
            padding-left: 4px;
        }
        table td a{
            width: 60px;
        }
    </style>
</head>
<body>
<div class="row main-content">
    <div id="fastflow-left-content" class="col-md-6 col-lg-6 col-sm-6">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#detail-table" data-toggle="tab" aria-expanded="true">列表</a></li>
                <li><a href="#detail-timeline" data-toggle="tab" aria-expanded="true">时间线</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="detail-table">
                    <!--tablePrintStart-->
                    <style>
                        table tr th,td{
                            text-align: center;
                            display: table-cell;
                            vertical-align: middle!important;
                            word-break: break-all;
                            word-wrap:break-word;
                        }
                    </style>
                    <div class="box" style="border-top: 0;">
                        <div class="box-header" style="border-bottom: 3px solid #e5e5e5;">
                            <span class="bill-title" style="margin-right: 12px;"><label class="text-cyan">单据</label>：{$bill} (ID：{$bill_id})</span><br>
                            <span><label class="text-cyan">发起人</label>：{$initiator}</span><br>
                            <span><label class="text-cyan">部门</label>：{$department}</span>
                            <div class="box-tools">
                                <div class="input-group input-group-sm" style="width: 150px;">
                                    <div class="input-group-btn">
                                        <a href="javascript:;" class="btn btn-default pull-right table-print"><i class="fa fa-print"></i>打印/保存为PDF</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-body table-responsive no-padding">
                            <table class="table table-striped table-bordered detail-table" style="table-layout: fixed;margin-top: 4px;">
                                <tbody>
                                <tr>
                                    <th width="180px">时间</th>
                                    <th width="80px">审批步骤</th>
                                    <th width="120px">审批人/组</th>
                                    <th width="100px">操作</th>
                                    <th width="300px">审批内容</th>
                                    <th width="120px">资料</th>
                                    <th width="120px">代理人/组</th>
                                    <th width="120px">被代理人/组</th>
                                </tr>
                                {volist name='logs' id='log'}
                                    {volist name='log' id='row'}
                                    <tr>
                                        <td>
                                            {$row['longtime']}
                                        </td>
                                        <td>
                                            {$row['step_name']}
                                        </td>
                                        <td>{$row['worker_name']}</td>
                                        <td>
                                            {if $row['check_type']==1}<a class="btn btn-success btn-xs">同  意</a>{/if}
                                            {if $row['check_type']==2}<a class="btn btn-danger btn-xs">驳  回</a>{/if}
                                            {if $row['check_type']==3}<a class="btn btn-info btn-xs">发起会签</a>{/if}
                                            {if $row['check_type']==5}<a class="btn btn-success btn-xs">发起审批</a>{/if}
                                            {if $row['check_type']==6}<a class="btn btn-warning btn-xs">流程结束</a>{/if}
                                            {if $row['is_agency']==1}<a class="btn btn-info-light btn-xs" style="margin-top: -1px;">代  理</a>{/if}
                                        </td>
                                        <td>{$row['check_content']}</td>
                                        <td>
                                            {if $row['file']!=''}
                                            <span class="flow-file">
                                                <a href="{$row['file']}" class="btn btn-info-light btn-xs">{if $row['file_name']!= ''}{$row['file_name']}{else /}资料{/if}</a>
                                            </span>
                                            {/if}
                                        </td>
                                        <td>
                                            {if $row['is_agency']==1}
                                            {$row['agent']}
                                            {/if}
                                        </td>
                                        <td>
                                            {if $row['is_agency']==1}
                                            {$row['principal']}
                                            {/if}
                                        </td>
                                    </tr>
                                    {/volist}
                                {/volist}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--tablePrintEnd-->
                </div>
                <div class="tab-pane" id="detail-timeline">
                    <!--timelinePrintStart-->
                    <style>
                        .timeline {
                            padding-bottom: 10px;
                        }
                        .timeline-item {
                            margin-top: 8px !important;
                            background-color: #fbfbfb!important;
                        }

                        .timeline li .label-step {
                            display: inline-block;
                            min-width: 80px;
                            font-size: 100%;
                            background-size: 100% 100%;
                            background-color: #4d7fad;
                        }

                        .timeline .label-time {
                            background-color: #afbdcd!important;
                        }

                        .timeline-header {
                            background: #f1f1f1;
                            color: #0a6aa1;
                            font-size: 15px !important;
                        }

                        .timeline-body p span {
                            vertical-align: middle;
                        }

                        li .label {
                            padding: .3em .6em .3em !important;
                        }
                    </style>
                    <div class="box" style="border-top: 0;">
                        <div class="box-header" style="border-bottom: 3px solid #e5e5e5;">
                            <span class="bill-title" style="margin-right: 12px;"><label class="text-cyan">单据</label>：{$bill} (ID：{$bill_id})</span><br>
                            <span><label class="text-cyan">发起人</label>：{$initiator}</span><br>
                            <span><label class="text-cyan">部门</label>：{$department}</span>

                            <div class="box-tools">
                                <div class="input-group input-group-sm" style="width: 150px;">
                                    <div class="input-group-btn">
                                        <a href="javascript:;" class="btn btn-default pull-right timeline-print"><i class="fa fa-print"></i>打印/保存为PDF</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-body table-responsive no-padding">
                            <ul class="timeline" style="margin-top: 4px;">
                                {volist name='logs' id='log'}
                                <li class="time-label">
                                    <span class="label label-time">{$key}</span>
                                </li>
                                {volist name='log' id='row'}
                                <li>
                                    <span class="label label-step"><i class="fa fa-tasks"></i>{$row['step_name']}</span>
                                    <div class="timeline-item">
                                        <span class="time"><i class="fa fa-clock-o"></i> {$row['longtime']}</span>
                                        <div class="timeline-header">
                                            <label style="font-weight:300;">
                                                {if $row['check_type']==6}流程结束：{elseif $row['check_type']==5}发起人：{else /}审批人：{/if}
                                                <span class="text-warning">{$row['worker_name']}</span>
                                            </label>
                                            {if $row['check_type']==1}<a class="btn btn-success-light btn-xs">同意</a>{/if}
                                            {if $row['check_type']==2}<a class="btn btn-danger-light btn-xs">驳回</a>{/if}
                                            {if $row['check_type']==3}<a class="btn btn-info-light btn-xs">发起会签</a>{/if}
                                            {if $row['check_type']==5}<a class="btn btn-success-light btn-xs">发起审批</a>{/if}
                                            {if $row['is_agency']==1}<a class="btn btn-info-light btn-xs">代理</a>{/if}
                                        </div>
                                        <div class="timeline-body">
                                            <div style="margin-left: 10px;">
                                                {if $row['check_type']==6}
                                                <p><a class="btn btn-warning btn-xs" style="font-size: 80%">流程结束</a></p>
                                                {elseif $row['check_type']==4}
                                                <p><a class="btn btn-warning btn-xs" style="font-size: 80%">审批被强制终止</a></p>
                                                {else /}
                                                <legend>
                                                    <div class="row">
                                                        {if $row['is_agency']==1}
                                                        <div class="col-xs-12 col-sm-6" style="margin-bottom: 8px;">
                                                            <span class="label label-info text-bold"><i class="fa fa-user"></i>代理人(组)</span>
                                                            <span class="span-content">
                                                                {$row['agent']}
                                                            </span>
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6" style="margin-bottom: 8px;">
                                                            <span class="label label-info text-bold"><i class="fa fa-user"></i>被代理人(组)</span>
                                                            <span class="span-content">
                                                                {$row['principal']}
                                                            </span>
                                                        </div>
                                                        {/if}
                                                    </div>
                                                </legend>
                                                {if $row['check_type']==2}
                                                <p>
                                                    <span class="text-bold"><i class="fa fa-mail-reply text-danger"></i>驳回步骤：</span>
                                                    <span class="text-info">{$row['back_steps']}</span>
                                                </p>
                                                {/if}
                                                {if $row['check_type']==3}
                                                <p><span class="text-bold"><i class="fa  fa-user text-success"></i>会签人员：</span>
                                                    <span class="text-info">{$row['sign_worker']}</span>
                                                    <span class="text-success">
                                                {php}
                                                if(count(explode(',',$row['sign_worker']))>1){
                                                    if($row['sign_checkmode']==1){
                                                        echo '(联合会签)';
                                                    }
                                                    else{
                                                        echo '(任一会签)';
                                                    }
                                                }
                                                {/php}
                                            </span>
                                                </p>
                                                {/if}
                                                <p>
                                                    <span class="text-bold"><i class="fa fa-pencil-square-o text-warning"></i>审批内容：</span>
                                                    {$row['check_content']}
                                                </p>
                                                {if $row['file']!=''}
                                                <p>
                                                    <span class="text-bold"><i class="fa  fa-file-text-o text-gray"></i>资料下载：</span>
                                                    <span class="flow-file">
                                                        <a href="{$row['file']}" class="btn btn-info-light btn-xs">{if $row['file_name']!= ''}{$row['file_name']}{else /}资料{/if}</a>
                                                    </span>
                                                </p>
                                                {/if}
                                                {/if}
                                            </div>
                                        </div>

                                    </div>
                                </li>
                                {/volist}
                                {/volist}

                            </ul>
                        </div>
                    </div>
                    <!--timelinePrintEnd-->
                </div>
            </div>
        </div>
    </div>
    <div id="fastflow-right-content" class="col-md-6 col-lg-6 col-sm-6">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#bill-edit" data-toggle="tab" aria-expanded="true">单据</a></li>
            </ul>
            <div class="tab-content">
                <!--billPrintStart-->
                <div class="tab-pane active" id="bill-edit">
                    <lagend class="bill-legend hidden" style="display:block;width:100%;padding-bottom:8px;font-size:14px;padding-left: 10px;padding-top: 8px;margin-bottom: 12px;color: #0a6aa1;border-bottom: 3px solid #e5e5e5;">
                        <span class="bill-title" style="margin-right: 12px;"><label class="text-cyan">单据</label>：{$bill} (ID：{$bill_id})</span><br>
                        <span><label class="text-cyan">发起人</label>：{$initiator}</span><br>
                        <span><label class="text-cyan">部门</label>：{$department}</span>
                    </lagend>
                </div>
                <!--billPrintEnd-->
            </div>
        </div>
    </div>

</div>
<div class="footer" style="display:none;background: #ffffff;height: 53px;padding: 10px 10px 0 0;">
    <div class="col-xs-12 col-sm-12">
        <a href="javascript:;" class="btn btn-warning pull-right export-word" style="margin-left: 4px;">保存为Word</a>
        <a href="javascript:;" class="btn btn-info pull-right merge-print" style="margin-left: 4px;">合并打印</a>
        <a href="javascript:;" class="btn btn-success pull-right bill-print">打印单据</a>
    </div>
</div>
</body>
</html>
